import { PageLoading } from "@ant-design/pro-components";
import { Layout } from "antd";
import { useModel } from "umi";
import HeaderContent from "./components/HeaderContent";
import MainContent from "./components/MainContent";
import "./index.css";
const { Header, Sider, Content } = Layout;

// 基础布局
const BasicLayout: React.FC = () => {
  const { name } = useModel("userInfo");
  const { collapsed } = useModel("collapsed");
  // 初始化查询：首次登录查询用户信息和菜单数据
  console.log(name);
  // 渲染拦截
  if (!name) {
    return <PageLoading></PageLoading>;
  }

  return (
    <Layout className="layoutContainer">
      <Sider className="layoutLeftContainer" width={200} collapsedWidth={60} collapsed={collapsed}>
        {/* <SiderContent /> */}
      </Sider>
      <Layout className="layoutRightContainer">
        <Header className="layoutHeader">
          <HeaderContent />
        </Header>
        <Content className="layoutContent">
          <MainContent />
        </Content>
      </Layout>
    </Layout>
  );
};

export default BasicLayout;
